//  读取并渲染用户名
rederUserName()

// 给省、市、地区统一拿到外面声明变量
// 省
const proSelect = document.querySelector('[name="province"]')
// 市
const citySelect = document.querySelector('[name="city"]')
// 地区
const areaSelect = document.querySelector('[name="area"]')



// 渲染部分----------------
// 1、封装函数
// 1.1、通过接口文档  查看请求的相关信息
// 1.2、axios进行发送请求
// 1.3、获取数据--遍历--渲染即可
async function getStudents() {
    const res = await axios({
        url: '/students',
    })
    console.log(res);
    // console.log(res);
    const data = res.data.map(ele => {
        let gender = ele.gender == 0 ? '男' : '女'
        return `<tr>
    <td>${ele.name}</td>
    <td>${ele.age}</td>
    <td>${gender}</td>  
    <td>${ele.group}</td>
    <td>${ele.hope_salary}</td>
    <td>${ele.salary}</td>
    <td>${ele.province}${ele.city}${ele.area}</td>
    <td data-id="${ele.id}">
      <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen"></i></a>
      <a href="javascript:;" class="text-danger" ><i class="bi bi-trash"></i></a>
    </td>
  </tr>`
    }).join('')
    document.querySelector('.list').innerHTML = data
}
getStudents()

// 新增功能的步骤-----------------
// 模态框
// 2.1给增加按钮注册点击事件
// 2.2打开模态框
// 2.3获取省 市 区的下拉框
// 2.4给模态框的确认按钮注册点击事件
// 2.5用form收集表单的内容
// 2.6收集表单的值，基于接口文档
// 2.7发送请求-基于接口文档
// 2.8因为内容和接口文档不一致，所以得需要 number ||  +  解构 。
// 关闭模态框
// 清空表单内容
//重新渲染 
const addModal = document.querySelector('#modal')  //botstap插件模态框
const modal = new bootstrap.Modal(addModal)
document.querySelector('#openModal').addEventListener('click', async function () {  //增加按钮注册点击事件
    document.querySelector('.modal-title').innerHTML = '添加学员信息'
    // const form = document.querySelector('#form')  //form收集表单的内容
    // const data = serialize(form, { hash: true, empty: true })
    // data.age = Number(data.age)
    // data.gender = Number(data.gender)
    // data.group = Number(data.group)
    // data.hope_salary = Number(data.hope_salary)
    // data.salary = Number(data.salary)
    // const {age,area,city,gender,group,hope_salary,name,province,salary } = data
    // const res = await axios({
    //     url: '/students',
    //     method: 'post',
    //     data
    // })
    // console.log(res);
    // console.log(data);

    modal.show() //模态框展示

    // form.reset()  //情况表单内容
    // getStudents()  //重新渲染

})
// 省份列表
// 发送请求-接口文档
// map+join('')进行拼接
// 获取数据进行渲染到模态框
async function getProvince() {
    const res = await axios({
        url: '/api/province',
    })
    // console.log(res);
    const arr = res.list.map(ele => `<option value="${ele}">${ele}</option>`).join('')
    document.querySelector('[name="province"]').innerHTML = `<option value="">--省份--</option>${arr}`
}
getProvince()
// 城市列表
// 给省份设置change点击设计--当内容被修改时就失焦
// 发送请求-接口文档--params：参数{panme：省份(父元素).内容}
// map+join('')进行拼接
// 获取数据进行渲染到模态框
document.querySelector('[name="province"]').addEventListener('change', async function () {
    const res = await axios({
        url: '/api/city',
        params: {
            pname: this.value
        }
    })
    console.log(res);
    const htmlStr = res.list.map(ele => `<option value="${ele}">${ele}</option>`).join('')
    document.querySelector('[name="city"]').innerHTML = `<option value="">--城市--</option>${htmlStr}`
})

// 地区列表
// 给城市设置change点击事件--当内容被修改时就失焦
// 发送请求-接口文档--params：参数{panme：获取省份的内容，cname：城市(父元素).内容}
// map+join('')进行拼接
// 获取数据进行渲染到模态框
document.querySelector('[name="city"]').addEventListener('change', async function () {
    const res = await axios({
        url: '/api/area',
        params: {
            pname: document.querySelector('[name="province"]').value,
            cname: this.value
        }
    })
    console.log(res);
    const getCity = res.list.map(ele => `<option value="${ele}">${ele}</option>`).join('')
    document.querySelector('[name="area"]').innerHTML = `<option value="">--地区--</option>${getCity}`
})

// ----添加的确认按钮----
document.querySelector('.btn-blue').addEventListener('click', async function () {
    // form-serialize插件可以快速收集表单元素的值
    const form = document.querySelector('#form')
    // hash设置生成的数据-true：js对象----flase：查询字符串
    // empty是否收集空数据-true：收集空数据-----false：空数据不收集
    const data = serialize(form, { hash: true, empty: true })
    // 因为内容和接口文档不一致，所以得需要number。
    data.age = Number(data.age)
    data.gender = Number(data.gender)
    data.group = Number(data.group)
    data.hope_salary = Number(data.hope_salary)
    data.salary = Number(data.salary)
    // 添加按钮
    try {
        if (document.querySelector('.modal-title').innerHTML === '添加学员信息') {
            const res = await axios({
                // 发送post请求
                url: '/students',
                method: 'post',
                data,
            })
            console.log(res);
            // alert(res.message)
            modal.hide()  //关闭模态框
            form.reset()  //清空表单内容
            getStudents() //重新渲染
            showToast('添加学生成功')  //调用提示框
        } else {
            const res = await axios({
                url: `/students/${target.parentNode.parentNode.dataset.id}`
            })
            console.log(res);
        }
    } catch (error) {
        console.dir(error.response.data.message);
        showToast('添加学生失败')
    }
})

// 3.删除按钮
// 3.1给删除学生的祖先元素注册点击事件
// 3.2通过事件对象e去筛选点击元素
// 3.3通过id找到子元素
// 3.4发送请求接口文档
// 3.5提示用户
// 3.6重新渲染
document.querySelector('.list').addEventListener('click', async function (e) {
    const target = e.target
    //   找到我们的删除图标按钮
    if (target.classList.contains('bi-trash')) {
        const id = target.parentNode.parentNode.dataset.id  //parentNode找子元素
        // console.log(id);
        const res = await axios({
            url: `/students/${id}`,
            method: 'delete',
        })
        console.log(res);
        showToast('删除成功')
        getStudents() //重新渲染
    }

})

// 4.编辑按钮
// 4.1获取图书数据
// 4.2给编辑按钮注册点击事件-利用事件委托
// 4.3编辑弹框显示
// 4.4发送请求-获取学生数据通过id获取详情 - 数据回显通过Object。keys - 存储数控 - 关闭模态框 - 重新渲染 - 清空
document.querySelector('.list').addEventListener('click', async function (e) {
    const target = e.target  //事件源
    if (target.classList.contains('bi-pen')) {     //  找到编辑
        //  获取模态框的标题，并进行修改
        document.querySelector('.modal-title').innerHTML = '编辑学员信息'
        const res = await axios({
            url: `/students/${target.parentNode.parentNode.dataset.id}`,
        })
        // 为了记录id
        id = res.data.id
        // 因为change事件默认传参事件对象e，所有我们第一个传参e给e个位置
        // 对象-获取键//forEach过滤数组
        Object.keys(serialize(document.querySelector('#form'), { hash: true, empty: true })).forEach(ele => {
            const data = res.data
            console.log(data[ele]);//表单元素的值
            document.querySelector(`[name=${ele}]`).value = res.data[ele]

        });
        // 定义data
        const data = res.data
        // 设置省
        const province = data.province
        proSelect.value = province
        // 设置市
        const cityRes = await axios.get('/api/city', {
            params: {
                pname: province
            }
        })
        const cityHtml = cityRes.list.map(v => {
            return `<option value="${v}">${v}</option>`
        }).join('')
        citySelect.innerHTML = `<option value="">--城市--</option>${cityHtml}`
        const city = data.city
        citySelect.value = city
        // 设置区
        const areaRes = await axios.get('/api/area', {
            params: {
                pname: province,
                cname: city
            }
        })
        const areaHtml = areaRes.list.map(v => {
            return `<option value="${v}">${v}</option>`

        }).join('')
        const area = data.area
        areaSelect.innerHTML = `<option value="">--地区--</option>${areaHtml}`
        areaSelect.value = area
        modal.show() //展开模态框
    }

})









